<template>
	<view>
		<u-navbar title="我的订单" bgColor="#e0f3e9" autoBack placeholder></u-navbar>
		<view class="" style="background-color: #e0f3e9;padding:20rpx 0 50rpx;">
			<u-tabs :list="listtab" lineWidth="32rpx" lineHeight='6rpx' lineColor="#3FD574" :activeStyle="{
			            color: '#010101',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#5D5B5B',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 36rpx; padding-right: 36rpx; height: 70rpx;font-size:28rpx;" :current='status'
				@click="click">
			</u-tabs>
		</view>
		<view class="con" :style="{height: 'calc(100vh - 44px - 170rpx - '
			+$u.addUnit($u.sys().statusBarHeight + $u.sys().safeAreaInsets.bottom,'px')+')'}">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="order" v-for="(item,index) in l" :key="index" @click="navto('/pages/order/details')">
					<view class="order__num">
						订单编号: {{item.no}}
					</view>
					<view class="order__item" :class="index1==(item.orderlist.length-1)?'bb0':''"
						v-for="(item1,index1) in item.orderlist" :key="index1">
						<view class="u-flex" style="margin-bottom: 40rpx;">
							<image src="/static/goods/o0.png" class="order__item__pic" mode="aspectFill"></image>
							<view class="" style="flex: 1;">
								<view class="order__item__name">
									{{item1.name}}
								</view>
								<view class="order__item__price">
									{{item1.price}}
								</view>
								<view class="u-flex u-flex-y-center u-flex-between">
									<view class="order__item__num">
										数量 × {{item1.num}}
									</view>
									<view class="order__item__allprice">
										￥{{item1.num*item1.price}}
									</view>
								</view>
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-end" v-if="item1.status==0">
							<view class="order__item__btn">
								取消订单
							</view>
							<view class="order__item__btn1">
								去支付
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-end" v-if="item1.status==1">
							<view class="order__item__btn" style="background: #3ED475;color: #fff;">
								免拼成单
							</view>
							<view class="order__item__btn1">
								邀请好友拼单
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-end" v-if="item1.status==2">
							<view class="order__item__btn">
								申请退款
							</view>
							<view class="order__item__btn" style="background: #3ED475;color: #fff;">
								配送信息
							</view>
							<view class="order__item__btn1">
								确认收货
							</view>
						</view>
						<view class="u-flex u-flex-y-center u-flex-end" v-if="item1.status==3">
							<view class="order__item__btn">
								取消订单
							</view>
							<view class="order__item__btn" style="background: #3ED475;color: #fff;">
								再来一单
							</view>
							<view class="order__item__btn1" @click="navto('/pages/order/evaluate')">
								立即评价
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listtab: [{
					name: '全部',
				}, {
					name: '待支付'
				}, {
					name: '拼单中'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}],
				l: [],
				list0: [],
				list1: [{
					no: 'pcc45454555',
					orderlist: [{
						status: 0,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, {
						status: 0,
						name: '赐平和老树三红蜜柚箱装',
						pic: '/static/goods/o1.png',
						num: 1,
						price: 16.3
					}, ]
				}, ],
				list2: [{
					no: 'pcc45454555',
					orderlist: [{
						status: 1,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, ]
				}, {
					no: 'pcc45454555',
					orderlist: [{
						status: 1,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, ]
				}],
				list3: [{
					no: 'pcc45454555',
					orderlist: [{
						status: 2,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, ]
				}, {
					no: 'pcc45454555',
					orderlist: [{
						status: 2,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, ]
				}],
				list4: [{
					no: 'pcc45454555',
					orderlist: [{
						status: 3,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, ]
				}, {
					no: 'pcc45454555',
					orderlist: [{
						status: 3,
						name: '正宗新疆哈密瓜一个2斤装',
						pic: '/static/goods/o0.png',
						num: 1,
						price: 12.9
					}, ]
				}],
				status: 0
			};
		},
		onLoad(o) {
			if (!o.status) {
				this.status = 0
			} else {
				this.status = Number(o.status) + 1
			}
			this.list0 = [...this.list1, ...this.list2, ...this.list3, ...this.list4]
			this.l = this['list' + this.status]
		},
		methods: {
			click(e) {
				this.l = this['list' + e.index]
			}
		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;
		background-color: #f9f7f7;
		margin-top: -30rpx;
		border-radius: 30rpx;
	}

	.order {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 20rpx;
		margin-bottom: 34rpx;

		&__num {
			font-family: PingFang;
			font-weight: 500;
			font-size: 25rpx;
			color: #727272;
			line-height: 25rpx;
			padding: 36rpx 10rpx 0;
		}

		&__item {
			padding: 26rpx 0 26rpx 10rpx;
			border-bottom: 1rpx solid rgba(233, 234, 236, .79);

			&__pic {
				width: 139rpx;
				height: 140rpx;
				background: #0AA694;
				border-radius: 15rpx;
				margin-right: 24rpx;
			}

			&__name {
				font-family: PingFang;
				font-weight: bold;
				font-size: 32rpx;
				color: #181818;
				line-height: 56rpx;
			}

			&__price {
				font-family: PingFang;
				font-weight: bold;
				font-size: 36rpx;
				color: #181818;
				line-height: 30rpx;
				margin-bottom: 20rpx;
				margin-top: 6rpx;

				&::before {
					content: "￥";
					font-size: 30rpx;
				}
			}

			&__num {
				font-family: PingFang;
				font-weight: 500;
				font-size: 21rpx;
				color: #919191;
				line-height: 21rpx;
			}

			&__allprice {
				font-family: PingFang;
				font-weight: bold;
				font-size: 36rpx;
				color: #FD3C33;
				line-height: 36rpx;
			}

			&__btn {
				padding: 0 30rpx;
				min-width: 98rpx;
				height: 63rpx;
				background: #F8F8F8;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang;
				font-weight: 500;
				font-size: 25rpx;
				color: #5D5B5B;
				line-height: 25rpx;
				margin-right: 17rpx;
			}

			&__btn1 {
				padding: 0 30rpx;
				min-width: 98rpx;
				height: 63rpx;
				background: #F54D42;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang;
				font-weight: 500;
				font-size: 25rpx;
				color: #FFFFFF;
				line-height: 25rpx;
			}
		}
	}

	.bb0 {
		border-bottom: 0;
	}
</style>